<template>
    <div class="view">
        <android-nav-bar title="积分转账" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="recharge-box">
                <div class="title">转账账户</div>
                <div class="transfer-phone flex">
                    <span class="iconfont icon-shouji-copy"></span>
                    <cube-input v-model="transferPhone.value"
                                :placeholder="transferPhone.placeholder" :type="transferPhone.type"></cube-input>
                </div>
                <div class="title">转账金额(最大转账金额为￥{{user.payPoints}})</div>
                <div class="amount">
                    <div class="rmb-sign">￥</div>
                    <input class="rmb-number" type="number" v-model="amount">
                </div>
                <div class="title">动态码验证</div>
                <div class="code flex">
                    <cube-input v-model="code.value" :maxlength="code.maxlength"
                                :placeholder="code.placeholder"></cube-input>
                    <cube-button class="canSendCode" @click="getCodeInRegister" :disabled="getCodeInRegisterBtn.disabled" :inline="true">
                        {{getCodeInRegisterBtn.text}}
                    </cube-button>
                </div>
                <div class="recharge" @click="toRecharge">下一步</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";
    import VerificationUnit from "@/unit/VerificationUnit";
    import DialogConfig from "@/constant/DialogConfig";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineMoneyRecharge extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private amount: number | "" = "";
        private getCodeAgainTime: number = 60;
        private getCodeInRegisterTimer: any = "";
        private getCodeInRegisterTime: number = 60;

        private transferPhone: any = {
            value: "",
            placeholder: "请输入转账手机号",
            type:'number'
        }

        private code: any = {
            value: "",
            placeholder: "请输入动态码",
            maxlength: 6
        };

        private get getCodeInRegisterBtn(): any {
            if (this.getCodeInRegisterTime <= 0) {
                clearInterval(this.getCodeInRegisterTimer);
                this.getCodeInRegisterTime = this.getCodeAgainTime;
            }
            const disabled = this.getCodeInRegisterTime !== this.getCodeAgainTime;
            console.log(disabled)
            return {
                disabled: disabled,
                text: disabled ? `${this.getCodeInRegisterTime}秒后重发` : "获取动态码",
            };
        };

        private getCodeInRegister(): void {
            if (VerificationUnit.phone(String(this.user.phone))) {
                (<any> this).$createToast({
                    type: "warn",
                    txt: "动态码将以短信的形式通知到您的注册手机号,请注意查收!",
                    time:3000
                }).show();
                Http.post(this.api.identify, {phone: this.user.phone}).then((res) => {
                    if (res.code === 1) {
                        this.getCodeInRegisterTime--;
                        this.getCodeInRegisterTimer = setInterval(() => {
                            this.getCodeInRegisterTime--;
                        }, 1000);
                    } else {
                        (<any> this).$createToast({
                            type: "error",
                            txt: res.msg
                        }).show();
                    }

                }).catch(() => {
                    (<any> this).$createToast({
                        type: "error",
                        txt: "发送失败"
                    }).show();
                });
            } else {
                (<any> this).$createToast({
                    time: 2500,
                    type: "warn",
                    txt: `${(<any> this).tel.value}不是合法的手机号`
                }).show();
            }

        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private mounted(): void {

        }

        private async toRecharge(): Promise<any> {
            if(!VerificationUnit.phone(String(this.transferPhone.value))){
                (<any> this).$createToast({
                    time: 2500,
                    type: "warn",
                    txt: `${(<any> this).transferPhone.value}不是合法的手机号!`
                }).show();
                return;
            }
            if(String(this.amount).trim()==''){
                (<any> this).$createToast({
                    time: 2500,
                    type: "warn",
                    txt: `转账金额不能为空!`
                }).show();
                return;
            }else if(Number(this.amount)>this.user.payPoints){
                (<any> this).$createToast({
                    time: 2500,
                    type: "warn",
                    txt: `转账金额不能大于积分余额!`
                }).show();
                return;
            }else if(Number(this.amount)<=0){
                (<any> this).$createToast({
                    time: 2500,
                    type: "warn",
                    txt: `转账金额必须大于0!`
                }).show();
                return;
            }
            if(String(this.code.value).trim()==''){
                (<any> this).$createToast({
                    time: 2500,
                    type: "warn",
                    txt: `为您的账户安全，请进行动态码验证!`
                }).show();
                return;
            }
            try {
                const transferRes=await Http.get(this.api.transferPoints,{phone:this.transferPhone.value,amount:this.amount}, {token: this.user.token});
                if(transferRes.code==1){
                    const dialogConfig = new DialogConfig();
                    (<any> this).$createDialog({
                        ...dialogConfig.transferAccountConfig({},transferRes.data.nickName),
                        onConfirm: () => {
                            Http.post(this.api.transferPoints,{phone:this.transferPhone.value,amount:this.amount,code:this.code.value}, {token: this.user.token}).then((res)=>{
                                if(res.code==1){
                                    (<any> this).$createToast({
                                        time: 2500,
                                        type: "correct",
                                        mask: true,
                                        txt: `转账成功!`,
                                        onTimeout: () => {
                                            this.navigateBack();
                                        }
                                    }).show();
                                }else {
                                    this.globalSingleResultToast(res);
                                }
                            })
                        }
                    }).show();
                }else {
                    this.globalSingleResultToast(transferRes);
                }
            }catch (e) {
                (<any> this).$createToast({
                    time: 2500,
                    type: "warn",
                    txt: `网络出错,请稍后再试!`
                }).show();
            }
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden

        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .recharge-box
                margin 20px 12px;
                padding 15px;
                background-color #fff;
                border-radius 10px;
                position relative;

                .title
                    font-size 13px;
                    color #666;

                .transfer-phone
                    background-color #fff;
                    height 50px;
                    padding 0 15px;
                    border-bottom 1px solid $theme-line-color;
                    margin-bottom 15px;

                    span
                        display inline-block;
                        width 50px;
                        line-height 45px;
                        font-size 24px;

                    >>>.cube-input
                        width calc(100vw - 40px - 30px);
                        border none !important;

                        .cube-input-field
                            padding 0;
                        &::after
                            display none;

                    >>>.cube-btn
                        width 100px;
                        height 35px;
                        font-size 12px;
                        padding 0;
                        border none;
                        border-radius 100px;
                        color #fff;
                        background-color $theme-common-color;


                .amount
                    padding 20px 10px 0 10px;
                    font-size 22px;
                    height 70px;
                    position relative;
                    display flex;
                    /*justify-content center;*/
                    align-items center;
                    color #333;
                    margin-bottom 15px;

                    .rmb-sign
                        flex 0 0 30px;
                        line-height 40px;
                        font-size 18px;
                        height 40px;

                    .rmb-number
                        flex 1;
                        height 40px;


                    &:after
                        content ''
                        display block;
                        position absolute;
                        left 0px;
                        right 0px;
                        height 1px;
                        background #eee;
                        transform translateY(.5)
                        bottom 0;


                .code
                    height 50px;
                    padding 0 15px;
                    border-bottom 1px solid $theme-line-color;
                    margin-bottom 15px;
                    align-items center;

                    >>>.cube-input
                        width calc(100vw - 100px - 30px);
                        border none !important;
                        .cube-input-field
                            padding 0;
                        &::after
                            display none;

                    >>>.cube-btn
                        width 100px;
                        height 35px;
                        font-size 12px;
                        padding 0;
                        border none;
                        border-radius 100px;
                        color #fff;
                        background-color $theme-common-color;

                    .cube-btn_disabled
                        background-color $theme-viceColor-font;
                        &::after
                            display none;

                .recharge-type
                    position relative;

                    svg
                        position absolute;
                        right 20px;
                        font-size 24px;
                        z-index 10;

                    .weixin
                        top 10px;

                    .zhifubao
                        bottom 10px;

                .recharge-quick
                    margin 20px 12px;
                    display flex;
                    flex-wrap wrap;
                    justify-content space-between;

                    .recharge-quick-item
                        width 135px;
                        height 45px;
                        margin-bottom 20px;
                        background $theme-advancing-color
                        border-radius 7px;
                        text-align center;
                        font-size 17px;
                        line-height 45px;
                        color #fff;

                        &:after
                            content '元';
                            font-size 12px;
                            padding-left 3px;


                .recharge
                    color #fff;
                    height 45px;
                    line-height 45px;
                    text-align center;
                    border-radius 200px;
                    margin 20px 30px;
                    background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));


</style>
